<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改费率代号信息')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-rateInfo-edit">
            <h4 class="form-header h4">费率代号</h4>
            <div class="form-group" style="margin-right: 150px;">
                <label class="col-sm-3 control-label is-required">费率代号：</label>
                <div class="col-sm-8">
                    <input name="arMark" th:value="${arMark}" readonly class="form-control" type="text" required>
                </div>
                <button type="button" class="btn btn-sm btn-primary" onclick="insertLine(this)">插入</button>
            </div>
            <h4 class="form-header h4">费率信息</h4>
            <table>
                <tr style="height:25px">
                    <td align="center" width="10%">起价格(包含)</td>
                    <td align="center" width="10%">终价格(不包含)</td>
                    <td align="center" width="10%">算法(P刷卡金额)</td>
                    <td align="center" width="6%">操作</td>
                </tr>
                <tr th:name="data" th:each="rule,state : ${ruleList}">
                    <td align="center">
                        <input type="hidden" name="id" th:value="${rule.ID}">
                        <input type="text" name="onset_money" class="form-control number" required th:value="${rule.ONSET_MONEY}" />
                    </td>
                    <td align="center">
                        <input type="text" name="end_money" class="form-control number" required th:value="${rule.END_MONEY}" />
                    </td>
                    <td align="center">
                        <input type="text" name="ar_content"class="form-control number" required th:value="${rule.AR_CONTENT}" />
                    </td>
                    <td align="center">
<!--                        <button type="button" class="btn btn-sm btn-primary" onclick="remove(this)">移除</button>-->
                    </td>
                </tr>
                <tr th:name="data" th:if="${#lists.size(ruleList)} eq 0">
                    <td>
                        <input type="text" name="onset_money" class="form-control number" required th:value="0" />
                        <input type="hidden" name="id" value="0">
                    </td>
                    <td>
                        <input type="text" name="end_money" class="form-control number" required th:value="999999999" />
                    </td>
                    <td>
                        <input type="text" name="ar_content"class="form-control number" required value="" />
                    </td>
                    <td align="center">
                        <button type="button" class="btn btn-sm btn-primary" onclick="remove(this)">移除</button>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var prefix = ctx + "rateInfo/rateInfo";
        $("#form-rateInfo-edit").validate({
            focusCleanup: true
        });

        function remove(e){
            $(e).parents("tr").remove();
        }
        function insertLine() {
            var html = '<tr name="data">' +
                '<td><input type="text" name="onset_money" class="form-control number" required /><input type="hidden" name="id" value="0"/></td>' +
                '<td><input type="text" name="end_money" class="form-control number" required /></td>' +
                '<td><input type="text" name="ar_content" class="form-control number" required /></td>' +
                '<td align="center"><button type="button" class="btn btn-sm btn-primary" onclick="remove(this)">移除</button></td>' +
                '</tr>';
            $("table").append(html);
        }

        function submitHandler() {
            if ($.validate.form()) {
                var rateRule = new Array();
                var flag = true;
                $("tr[name='data']").each(function(){
                    var id = $($(this).find('input[name = "id"]')).val();
                    var onsetMoney = $($(this).find('input[name = "onset_money"]')).val();
                    var endMoney = $($(this).find('input[name = "end_money"]')).val();
                    var arContent = $($(this).find('input[name = "ar_content"]')).val();
                    if (!id || !onsetMoney || !endMoney || !arContent){
                        $.modal.alertWarning("请补充数据！");
                        flag = false;
                    }
                    rateRule.push({'id':id, 'onsetMoney':onsetMoney,'endMoney':endMoney,'arContent':arContent});
                });
                if (flag){
                    $.operate.save(prefix + "/edit", {"arMark":$("[name='arMark']").val(),"rateRule":JSON.stringify(rateRule)});
                }
            }
        }
    </script>
</body>
</html>